<template>
  <div class="screen-header">
    <!-- 左侧区域 -->
    <div class="header-left">
      <div class="logo-area">
        <el-icon class="logo-icon"><Monitor /></el-icon>
        <span class="logo-text">Cola Designer Pro</span>
        <span class="version-tag">v2.7.5</span>
      </div>
    </div>

    <!-- 中间区域：操作按钮 -->
    <div class="header-center">
      <el-button-group>
        <el-button title="撤销" @click="$emit('undo')" :disabled="!canUndo">
          <el-icon><RefreshLeft /></el-icon>
        </el-button>
        <el-button title="重做" @click="$emit('redo')" :disabled="!canRedo">
          <el-icon><RefreshRight /></el-icon>
        </el-button>
      </el-button-group>
      
      <el-divider direction="vertical" />
      
       <el-button-group>
        <el-button title="导入">
          <el-icon><Upload /></el-icon>
        </el-button>
        <el-button title="导出">
          <el-icon><Download /></el-icon>
        </el-button>
      </el-button-group>
      
      <el-divider direction="vertical" />

      <el-button-group>
        <el-button title="清空画布">
          <el-icon><Delete /></el-icon>
        </el-button>
      </el-button-group>
    </div>

    <!-- 右侧区域 -->
    <div class="header-right">
      <el-button title="访问官网" link>
        <el-icon><Link /></el-icon>
        访问官网
      </el-button>
      <el-button title="主题" link>
        <el-icon><MagicStick /></el-icon>
        主题
      </el-button>
      <el-button @click="$emit('save')" type="primary">
        <el-icon><Check /></el-icon>
        保存
      </el-button>
      <el-button @click="$emit('preview')" plain>
        <el-icon><View /></el-icon>
        预览
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import {
  RefreshLeft,
  RefreshRight,
  Upload,
  Download,
  Delete,
  Link,
  MagicStick,
  Check,
  View,
  Monitor,
} from '@element-plus/icons-vue'

defineProps({
  canUndo: { type: Boolean, default: false },
  canRedo: { type: Boolean, default: false },
})

defineEmits(['undo', 'redo', 'save', 'preview'])

</script>

<style scoped>
.screen-header {
  height: 48px;
  background-color: #202124;
  border-bottom: 1px solid #3a3b3d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  color: #e5e5e5;
}

.header-left, .header-center, .header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 左侧 Logo */
.logo-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo-icon {
  width: 24px;
  height: 24px;
}
.logo-text {
  font-size: 16px;
  font-weight: bold;
  color: #e5e5e5;
}
.version-tag {
  background-color: #3c3e42;
  color: #a9a9a9;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}

/* 中间操作区 */
.header-center {
  flex: 1;
  justify-content: center;
}

/* 右侧功能区 */
.header-right {
  justify-content: flex-end;
}

/* Element Plus 组件样式覆盖 */
.el-button {
  --el-button-text-color: #a9a9a9;
  --el-button-bg-color: #2d2f34;
  --el-button-border-color: #3a3b3d;
  --el-button-hover-text-color: #fff;
  --el-button-hover-bg-color: #3c3e42;
  --el-button-hover-border-color: #4a4c50;
}

.el-button.is-link {
  --el-button-text-color: #a9a9a9;
}
.el-button.is-link:hover {
  --el-button-text-color: #fff;
}

.el-button--primary {
  --el-button-text-color: #fff;
  --el-button-bg-color: #409eff;
  --el-button-border-color: #409eff;
  --el-button-hover-bg-color: #66b1ff;
  --el-button-hover-border-color: #66b1ff;
}

.el-button--primary.is-plain,
.el-button.is-plain {
  --el-button-text-color: #409eff;
  --el-button-bg-color: rgba(64, 158, 255, 0.1);
  --el-button-border-color: rgba(64, 158, 255, 0.3);
  --el-button-hover-text-color: #fff;
  --el-button-hover-bg-color: #409eff;
  --el-button-hover-border-color: #409eff;
}

.el-button-group .el-button {
  border-radius: 6px !important;
}
.el-button-group .el-button:not(:last-child) {
  margin-right: -1px;
}

:deep(.el-divider--vertical) {
  border-color: #3a3b3d;
  height: 20px;
}
</style> 